{% extends "templates/base.html" %}

{% block csslink %}
		{{ super() }}
		<style type="text/css" title="currentStyle">
			@import "/media/css/demo_page.css";
			@import "/media/css/demo_table.css";
		</style>
		<link rel="stylesheet" href="/media/css/ui/jquery.ui.all.css">
		
        <script src="/media/js/jquery.js"></script>
        <script src="/media/js/jquery.dataTables.js"></script>
        
		<script src="/media/js/ui/jquery.ui.core.min.js"></script>
		<script src="/media/js/ui/jquery.ui.widget.min.js"></script>
		<script src="/media/js/ui/jquery.ui.mouse.min.js"></script>
		<script src="/media/js/ui/jquery.ui.button.min.js"></script>
		<script src="/media/js/ui/jquery.ui.draggable.min.js"></script>
		<script src="/media/js/ui/jquery.ui.position.min.js"></script>
		<script src="/media/js/ui/jquery.ui.resizable.min.js"></script>
		<script src="/media/js/ui/jquery.ui.dialog.min.js"></script>
		<script src="/media/js/ui/jquery.effects.core.min.js"></script>
		
		<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			var wasAction = false;
			
			$('#example').dataTable();

			$("#dialog-form").dialog({
				autoOpen: false,
				height: 350,
				width: 650,
				modal: true,
				open: function(event, ui) {
					if ($('#dialog-form').data('mode') == 'add') {
						$("span.ui-dialog-title").text('Add Bank');
						$(":button:contains('Save changes')").hide();
						$(":button:contains('Add Bank')").show();
					}
					else {
						$("span.ui-dialog-title").text('Edit Bank');
						$(":button:contains('Save changes')").show();
						$(":button:contains('Add Bank')").hide();
					}
				},
				buttons: {
					"Add Bank": function() {
						wasAction = true;
						
						$.ajax({
							type: 'POST',
							url: '/ams/syndic/{{ syndic.key().id() }}/bank/add/',
							data: $('#generated-form').serialize(),
							success: function(data) {
								$('#generated-form').html(data);
							},
							error: function (error) {
								alert('error');
							}
						})
					},
					"Save changes": function() {
						wasAction = true;
						
						$.ajax({
							type: 'POST',
							url: '/ams/syndic/{{ syndic.key().id() }}/bank/' + $("#dialog-form").data('id') + '/edit/',
							data: $('#generated-form').serialize(),
							success: function(data) {
								$('#generated-form').html(data);
							},
							error: function (error) {
								alert('error');
							}
						})
					},
					Clear: function() {
						$('#ok').html('');
						$('#dialog-form').find('input[type=text], textarea').val('');
					}
				},
				close: function() {
					if (wasAction == true)
						window.location = "/ams/syndic/{{ syndic.key().id() }}/bank/";
				}
			});

			$( '#add-bank' )
				.click(function() {
					$('#generated-form').load('/ams/syndic/{{ syndic.key().id() }}/bank/add/');
					$( '#dialog-form' ).data({'mode': 'add'});
					$( '#dialog-form' ).dialog( 'open' );
			});
			
			$( '#example tbody tr a' ).live('click', function( e ) {
					$('#generated-form').load('/ams/syndic/{{ syndic.key().id() }}/bank/' + e.target.id + '/edit/');
					$('#dialog-form' ).data({'mode': 'edit', 'id': e.target.id});
					$('#dialog-form' ).dialog( 'open' );
			});
		});
	    </script>
{% endblock %}

{% block title %} 
	{{ title }}
{% endblock %}

{% block header %}
{{ header }}
{% endblock %}

{% block login%}
{% if show_login %}
{{ super() }}
{% endif %}
{% endblock%}

{% block navigation %}
{% if not show_login %}
{{ super() }}
{% endif %}
{% endblock %}

{% block page_name %}
{{ content_header }}
{% endblock %}

{% block main_content %}
<p>
	<div>
		<a href="/ams/syndic/{{ syndic.key().id() }}/detail/">Back to {{ syndic.name }}</a>&nbsp;&nbsp;||&nbsp;&nbsp;
		<a href="#" id="add-bank">Add Bank</a>
	</div>
	<br/>
	
	<fieldset>
    <legend>Banks</legend>
	<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
		<thead>
			<tr>
				<th>Bank</th>
				<th>BIC</th>
				<th width="20">Functions</th>
			</tr>
		</thead>
		<tbody>
			{% if banks %}
			{% for b in banks %}
			<tr class="{{ loop.cycle('even gradeC', 'odd gradeC') }}">
				<td>{{ b.company }}</td>
				<td>{{ b.BIC }}</td>
				<td><a class="BankEditLink" id="{{ b.key().id() }}" href="#">Edit</a></td>
			</tr>
			{% endfor %}
			{% endif %}
		</tbody>
		<tfoot>
			<tr>
				<th>Libelle</th>
				<th>Libelle abrege</th>
				<th>&nbsp;</th>
			</tr>
		</tfoot>
	</table>
	</fieldset>
	
	<div id="dialog-form" title="Add Bank">
	<form action="" name="generated-form" id="generated-form" method="post">
	
	</form>
	</div>
</p>
{% endblock %}
